<template>
  <div :class="{ active: isActive }" @click="navigate">
    {{ route.name }}
  </div>
</template>

<script>
import { RouterLink, useLink } from "vue-router";
import { reactive, toRefs } from "vue";

export default {
  props: {
    ...RouterLink.props,
  },
  setup(props) {
    // console.log(useLink(props));
    // 获取 RouterLink 属性的内部属性和方法
    const { route, href, isActive, navigate } = useLink(props);
    // console.log(route, href, isActive, navigate);

    return {
      route,
      href,
      isActive,
      navigate,
    };
  },
};
</script>

<style  scoped>
.active {
  background-color: #3fb983;
}
</style>